<template>
	<div style="text-align: center;margin: 0 auto;">
		<h1>数据库【{{dbName}}】参数信息</h1>
		<span style="color: red;font-size: small;margin-top: 10px;">双击部分单元可以修改</span>
		<el-table :data="tableData" border style="width: 100%" :highlight-current-row="true" :cell-class-name="tableCellClassName" @cell-dblclick="onCelldbClick">
			<el-table-column prop="prop1" label="属性">
				<template slot-scope="scope">
					<i class="el-icon-edit" v-if="scope.row.index==2 || scope.row.index==3 || scope.row.index==4"></i>{{scope.row.prop1}}
				</template>
			</el-table-column>
			<el-table-column prop="value1" label="值">
				<template slot-scope="scope">
					<el-input v-if="scope.row.prop1Edit" size="small" v-model="scope.row.value1">
						 <el-button slot="append" icon="el-icon-check" @click="modifyCell('value1',scope.row)"></el-button>
						 <el-button slot="append" icon="el-icon-close" @click="canModifyCell('value1',scope.row)"></el-button>
					</el-input>
				  <span v-if="!scope.row.prop1Edit">{{scope.row.value1}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="prop2" label="属性">
				<template slot-scope="scope">
					<i class="el-icon-edit" v-if="scope.row.index==4"></i>{{scope.row.prop2}}
				</template>
			</el-table-column>
			<el-table-column prop="value2" label="值">
				<template slot-scope="scope">
					<el-input v-if="scope.row.prop2Edit" size="small" v-model="scope.row.value2">
						 <el-button slot="append" icon="el-icon-check" @click="modifyCell('value2',scope.row)"></el-button>
						 <el-button slot="append" icon="el-icon-close" @click="canModifyCell('value2',scope.row)"></el-button>
					</el-input>
				  <span v-if="!scope.row.prop2Edit">{{scope.row.value2}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="prop3" label="属性">
				<template slot-scope="scope">
					<i class="el-icon-edit" v-if="scope.row.index==4 ||scope.row.index==5"></i>{{scope.row.prop3}}
				</template>
			</el-table-column>
			<el-table-column prop="value3" label="值">
				<template slot-scope="scope">
					<el-input v-if="scope.row.prop3Edit" size="small" v-model="scope.row.value3">
						 <el-button slot="append" icon="el-icon-check" @click="modifyCell('value3',scope.row)"></el-button>
						 <el-button slot="append" icon="el-icon-close" @click="canModifyCell('value3',scope.row)"></el-button>
					</el-input>
				  <span v-if="!scope.row.prop3Edit">{{scope.row.value3}}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	import {mapGetters} from 'vuex'
	import * as taos from '../api/taosrestful.js'
	import bus from '../utils/bus'
	
	export default {
		name:'db',
		data() {
			return {
				tableData: [],
				payload:{},
				dbName:'',
				olderValue1:'',
				olderValue2:'',
				olderValue3:''
			}
		},
		computed: {
			...mapGetters(['curObject'])
		},
		beforeDestroy() { //页面销毁时需要解绑
			bus.$off("changeCurObject_db");
		},
		mounted() {
			var that = this;
			bus.$on('changeCurObject_db', function(p) {
				that.init()
			})
		},
		methods: {
			init() {
				this.tableData=[]
				let link = this.curObject.link
				this.dbName = this.curObject.dbName
				this.payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				taos.showDatabases(this.payload).then(data => {
					if (data.res) {
						let curDb = {}
						let that = this
						data.data.forEach(function(item){
							if(item.name===that.dbName){
								curDb = item
							}
						})
						let c = 'cache(MB)'
						let row1 = {'prop1':'名称','value1':curDb.name,'prop1Edit':false,'prop2':'创建时间','value2':curDb.created_time,'prop2Edit':false,'prop3':'状态','value3':curDb.status,'prop3Edit':false}
						this.tableData.push(row1)
						
						let row2 = {'prop1':'超表数','value1':curDb.ntables,'prop1Edit':false,'prop2':'vgroups','value2':curDb.vgroups,'prop2Edit':false,'prop3':'precision','value3':curDb.precision,'prop3Edit':false}
						this.tableData.push(row2)

						let row3 = {'prop1':'keep','value1':curDb.keep,'prop1Edit':false,'prop2':'days','value2':curDb.days,'prop2Edit':false,'prop3':'update','value3':curDb.update,'prop3Edit':false}
						this.tableData.push(row3)						
						
						let row4 = {'prop1':'replica','value1':curDb.replica,'prop1Edit':false,'prop2':'wallevel','value2':curDb.wallevel,'prop2Edit':false,'prop3':'fsync','value3':curDb.fsync,'prop3Edit':false}
						this.tableData.push(row4)
						
						let row5 = {'prop1':'quorum','value1':curDb.quorum,'prop1Edit':false,'prop2':'blocks','value2':curDb.blocks,'prop2Edit':false,'prop3':'cache(MB)','value3':curDb[c],'prop3Edit':false}
						this.tableData.push(row5)
						
						let row6 = {'prop1':'minrows','value1':curDb.minrows,'prop1Edit':false,'prop2':'maxrows','value2':curDb.maxrows,'prop2Edit':false,'prop3':'comp','value3':curDb.comp,'prop3Edit':false}
						this.tableData.push(row6)
					} else {
						this.$message({message: '连接失败',type: 'error',duration: 1000})
					}
				})
			},
			tableCellClassName({row, column, rowIndex, columnIndex}){
			      row.index=rowIndex;
			      column.index=columnIndex;
			},
			onCelldbClick(row, column, cell, event){
				if(column.index==0 ||column.index==2 || column.index==4){
					return
				}
				if(row.index==0 && column.index==1){//名称不能修改
					return
				}
				if(row.index==0 && column.index==5){//创建时间不能修改
					return
				}
				if(row.index==0 && column.index==4){//状态不能修改
					return
				}
				if(row.index==1 && column.index==1){//超表数不能修改
					return
				}
				if(row.index==1 && column.index==3){//vgroups不能修改
					return
				}
				if(row.index==1 && column.index==5){//precision不能修改
					return
				}
				if(row.index==3 && column.index==3){//wallevel不能修改
					return
				}
				if(row.index==4 && column.index==5){//cache(MB)不能修改
					return
				}
				debugger
				if(row.index==5 && column.index==1){//minrows不能修改
					return
				}
				if(row.index==5 && column.index==3){//maxrows不能修改
					return
				}
				if(column.property=='value1'){
					row.prop1Edit = true
					this.olderValue1 = row.value1
				}
				if(column.property=='value2'){
					row.prop2Edit = true
					this.olderValue2 = row.value2
				}
				if(column.property=='value3'){
					row.prop3Edit = true
					this.olderValue3 = row.value3
				}
			},
			canModifyCell(type,row){
				if(type==='value1'){
					row.prop1Edit = false
					row.value1 = this.olderValue1
				}else if(type==='value2'){
					row.prop2Edit = false
					row.value2 = this.olderValue2
				}else if(type==='value3'){
					row.prop3Edit = false
					row.value3 = this.olderValue3
				}
			},
			modifyCell(type,row){
				if(type==='value1'){
					taos.alterDatabase(this.dbName,row.prop1+' '+row.value1,this.payload).then(data => {
						if (data.res) {
							row.prop1Edit = false
						}else{
							this.$message({message: data.msg,type: 'error',duration: 1000})
						}
					})
				}else if(type==='value2'){
					taos.alterDatabase(this.dbName,row.prop2+' '+row.value2,this.payload).then(data => {
						if (data.res) {
							row.prop2Edit = false
						}else{
							this.$message({message: data.msg,type: 'error',duration: 1000})
						}
					})
				}else if(type==='value3'){
					taos.alterDatabase(this.dbName,row.prop3+' '+row.value3,this.payload).then(data => {
						if (data.res) {
							row.prop3Edit = false
						}else{
							this.$message({message: data.msg,type: 'error',duration: 1000})
						}
					})
				}
			}
		}
	}
</script>
